<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable size="small" style="width: 240px"
                      @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable size="small"
                      style="width: 240px" @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="用户状态" clearable size="small" style="width: 240px">
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
                         :value="dict.dictValue"/>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd"
                            type="daterange" range-separator="-" start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                       v-hasPermi="['system:user:add']">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                       v-hasPermi="['system:user:edit']">修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                       v-hasPermi="['system:user:remove']">删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
                       v-hasPermi="['system:user:import']">导入
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
                       v-hasPermi="['system:user:export']">导出
            </el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="用户编号" align="center" prop="userId"/>
          <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true"/>
          <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true"/>
          <el-table-column label="手机号码" align="center" prop="phonenumber" width="120"/>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
                         @change="handleStatusChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                         v-hasPermi="['system:user:edit']">修改
              </el-button>
              <el-button
                v-if="judgeD(scope.row.roleKeys)"
                size="mini"
                type="text"
                icon="el-icon-circle-check"
                @click="handleDataScope(scope.row)"
              >分配事务所
              </el-button>
              <el-button v-if="scope.row.userId !== 1" size="mini" type="text" icon="el-icon-delete"
                         @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-key" @click="handleResetPwd(scope.row)"
                         v-hasPermi="['system:user:resetPwd']">重置
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-key" v-hasPermi="['system:user:stopca']"
                         @click="handleForbiddenCa(scope.row)">禁用ca
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>
      </el-col>
    </el-row>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="form.roleIds" multiple placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
                           :disabled="item.status == 1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="showTelCode">
            <el-form-item prop="verifyCode" label="短信验证码">
              <el-input
                v-model="form.verifyCode"
                auto-complete="off"
                placeholder="请输入收到的短信验证码"
                style="width: 63%"
              />
              <el-button class="resendBtn" style="width: 35%;padding-left: 0;padding-right: 0;margin: 0;" type="primary"
                         v-show="!resendDisable" @click="handleSend()">发送验证码
              </el-button>
              <el-button class="resendBtn" style="width: 35%;padding-left: 0;padding-right: 0;margin: 0;" type="primary"
                         v-show="resendDisable" @click="handleResend()">重新发送
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="18"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">
                  {{dict.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入用户密码" type="password"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 当前事务所列表 -->
    <el-dialog
      :title="manageOfficeTitle"
      :visible.sync="manageOfficeVisible"
      width="1200px"
      :close-on-click-modal="false"
      append-to-body
      center
    >
      <el-form :model="manageOfficeQueryParams" ref="manageOfficeQueryForm" :inline="true">
        <el-form-item label="执业证书编号" prop="officeNumber">
          <el-input
            v-model="manageOfficeQueryParams.practiceCertificateNo"
            placeholder="请输入事务所执业证书编号"
            clearable
            size="small"
            class="width220"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="事务所名称" prop="firmName">
          <el-input
            v-model="manageOfficeQueryParams.firmName"
            placeholder="请输入事务所名称"
            clearable
            size="small"
            class="width220"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getListOfficeData">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetManageOfficeQuery">重置</el-button>
          <el-button type="primary" size="mini" @click="openOffice">添加事务所</el-button>
          <el-button type="danger" size="mini" @click="confirmRemoveTargetOffice">移出所选事务所</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="manageOfficeList"
        border
        stripe
        fit
        @selection-change="handleSelectionChangeManageOfficoe"
      >
        <el-table-column type="selection" width="55" align="center" fixed/>
        <el-table-column label="事务所名称" prop="firmName" width="420" :render-header="foo"/>
        <el-table-column label="事务所执业证书编号" prop="practiceCertificateNo" :render-header="foo"/>
        <el-table-column label="事务所状态" prop="firmStatus" :render-header="foo"/>
        <el-table-column label="联系人" prop="contacts" :render-header="foo"/>
        <el-table-column label="手机号" prop="phoneNumberOfContactPerson" :render-header="foo"/>
      </el-table>
      <pagination v-show="manageOfficetotal>0" :total="manageOfficetotal" :page.sync="manageOfficeQueryParams.pageNum"
                  :limit.sync="manageOfficeQueryParams.pageSize" @pagination="getListOfficeData"/>
    </el-dialog>
    <!-- 当前事务所列表 end -->

    <!-- 事务所选择列表 -->
    <el-dialog
      :title="addOfficeTitle"
      :visible.sync="addOfficeVisible"
      width="1000px"
      :close-on-click-modal="false"
      append-to-body
      center
    >
      <el-form :model="officeQueryParams" ref="officeQueryForm" :inline="true">
        <el-form-item label="执业证书编号" prop="officeNumber">
          <el-input
            v-model="officeQueryParams.practiceCertificateNo"
            placeholder="请输入事务所执业证书编号"
            clearable
            size="small"
            class="width220"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="事务所名称" prop="firmName">
          <el-input
            v-model="officeQueryParams.firmName"
            placeholder="请输入事务所名称"
            clearable
            size="small"
            class="width220"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handle0fficeQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetOfficeQuery">重置</el-button>
          <el-button type="primary" size="mini" @click="addTargetOffice">添加所选事务所</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="officeTable"
        :data="officeList"
        max-height="600"
        border
        stripe
        fit
        @selection-change="handleSelectionChangeOfficoe"
      >
        <el-table-column type="selection" width="55" align="center" fixed/>
        <el-table-column label="事务所ID" prop="officeId" width="100" :render-header="foo"/>
        <el-table-column label="事务所名称" prop="firmName" :show-overflow-tooltip="true" :render-header="foo"/>
        <el-table-column label="事务所执业证书编号" prop="practiceCertificateNo" width="150" :show-overflow-tooltip="true"
                         :render-header="foo"/>
      </el-table>
      <pagination v-show="officetotal>0" :total="officetotal" :page.sync="officeQueryParams.pageNum"
                  :limit.sync="officeQueryParams.pageSize" @pagination="getOfficeList"/>
    </el-dialog>
    <!-- 事务所选择列表 end -->

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport"/>
          是否更新已经存在的用户数据
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listUser,
    getUser,
    delUser,
    addUser,
    updateUser,
    exportUser,
    resetUserPwd,
    changeUserStatus,
    importTemplate,
    getListOffice,
    getNotListOffice,
    insertUserOffice,
    deleteUserOffice,
    updateCaUsbkeyStatus,
    getTelCode
  } from "@/api/system/user";
  import {getToken} from "@/utils/auth";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {utilsFoo} from "@/utils/index";

  export default {
    name: "User",
    components: {Treeselect},
    data() {
      return {
        // 短信重新发送
        resendDisable: false,
        showTelCode: true,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 选中的事务所
        officeIds: [],
        // 选中当前管理的事务所
        manageOfficeIds: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 事务所总条数
        officetotal: 0,
        // 管理事务所总条数
        manageOfficetotal: 0,
        // 用户表格数据
        userList: null,
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: undefined,
        // 是否显示弹出层
        open: false,
        // 默认密码
        initPassword: undefined,
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [],
        // 角色选项
        roleOptions: [],
        manageOfficeTitle: '',
        manageOfficeVisible: false,
        manageOfficeList: [],
        addOfficeTitle: '',
        addOfficeVisible: false,
        // 事务所列表
        officeList: [],
        // 表单参数
        form: {
          isUpdateTel: undefined
        },
        defaultProps: {
          children: "children",
          label: "label",
        },
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: {Authorization: "Bearer " + getToken()},
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        },
        // 当前打开的用户id
        targetUserId: '',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          deptId: undefined,
        },
        // 事务所查询参数
        officeQueryParams: {
          pageNum: 1,
          pageSize: 10,
          practiceCertificateNo: undefined,
          firmName: undefined,
        },
        // 管理事务所查询参数
        manageOfficeQueryParams: {
          pageNum: 1,
          pageSize: 10,
          practiceCertificateNo: undefined,
          firmName: undefined,
        },
        // 表单校验
        rules: {
          userName: [
            {required: true, message: "用户名称不能为空", trigger: "blur"},
          ],
          nickName: [
            {required: true, message: "用户昵称不能为空", trigger: "blur"},
          ],
          password: [
            {required: true, message: "用户密码不能为空", trigger: "blur"},
          ],
          phonenumber: [
            {required: true, message: "手机号码不能为空", trigger: "blur"},
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur",
            },
          ],
          verifyCode: [{required: true, trigger: "change", message: "验证码不能为空"}],
          idCard: [
            {required: true, message: "身份证号不能为空", trigger: "blur"},
            {
              pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: "请输入正确的身份证号",
              trigger: "blur",
            },
          ],
        },
      };
    },
    watch: {},
    created() {
      this.getList();
      this.getDicts("sys_normal_disable").then((response) => {
        this.statusOptions = response.data;
      });
      this.getConfigKey("sys.user.initPassword").then((response) => {
        this.initPassword = response.msg;
      });
    },
    methods: {
      foo(h, {column}) {
        return utilsFoo(h, {column})
      },
      judgeD(roleKeys) {
        return roleKeys.indexOf('office_grouping_admin') != -1;
      },
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
          (response) => {
            this.userList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.deptId = data.id;
        this.getList();
      },
      // 用户状态修改
      handleStatusChange(row) {
        let text = row.status === "0" ? "启用" : "停用";
        this.$confirm(
          '确认要"' + text + '""' + row.userName + '"用户吗?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return changeUserStatus(row.userId, row.status);
          })
          .then(() => {
            this.msgSuccess(text + "成功");
          })
          .catch(function () {
            row.status = row.status === "0" ? "1" : "0";
          });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          userId: undefined,
          userName: undefined,
          nickName: undefined,
          password: undefined,
          phonenumber: undefined,
          status: "0",
          remark: undefined,
          postIds: [],
          roleIds: [],
          verifyCode: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      resetOfficeQuery() {
        this.officeQueryParams = {
          pageNum: 1,
          pageSize: 10,
          practiceCertificateNo: undefined,
          firmName: undefined
        }
        this.resetForm("officeQueryForm");
        this.getOfficeList();
      },
      resetManageOfficeQuery() {
        this.manageOfficeQueryParams = {
          pageNum: 1,
          pageSize: 10,
          practiceCertificateNo: undefined,
          firmName: undefined
        }
        this.resetForm("manageOfficeQueryForm");
        this.getListOfficeData();
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      // 事务所选择列表选中数据
      handleSelectionChangeOfficoe(selection) {
        this.officeIds = selection.map((item) => item.officeId);
      },
      handleSelectionChangeManageOfficoe(selection) {
        this.manageOfficeIds = selection.map((item) => item.officeId);
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        getUser().then((response) => {
          this.roleOptions = response.roles;
          this.open = true;
          this.title = "添加用户";
          this.form.password = this.initPassword;
        });
        this.resendDisable = false;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const userId = row.userId || this.ids;
        getUser(userId).then((response) => {
          this.form = response.data;
          this.roleOptions = response.roles;
          this.form.postIds = response.postIds;
          this.form.roleIds = response.roleIds;
          this.open = true;
          this.title = "修改用户";
          this.form.password = "";
        });
        this.resendDisable = false;
      },
      /** 重置密码按钮操作 */
      handleResetPwd(row) {
        this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({value}) => {
            if (value != null && value != undefined && value.length > 0) {
              resetUserPwd(row.userId, value).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功，新密码是：" + value);
                }
              });
            }else{
              this.msgSuccess("请输入密码！");
            }
          })
          .catch(() => {
          });
      },
      /**禁用ca*/
      handleForbiddenCa(row) {
        this.$confirm('确认禁用' + row.userName + 'ca?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {};
          data.onlyDistinguish = row.idCard
          data.status = 1;
          updateCaUsbkeyStatus(data).then(res => {
            this.$message({
              type: 'success',
              message: '禁用成功!'
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '禁用已取消'
          });
        });
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.userId != undefined) {
              updateUser(this.form).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addUser(this.form).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const userIds = row.userId || this.ids;
        this.$confirm(
          '是否确认删除用户编号为"' + userIds + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return delUser(userIds);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
          .catch(function () {
          });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有用户数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exportUser(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          })
          .catch(function () {
          });
      },
      handleDataScope(row) {
        this.manageOfficeTitle = row.nickName + "管理的事务所列表";
        this.addOfficeTitle = "添加" + row.nickName + "管理的事务所";
        this.manageOfficeVisible = true;
        this.targetUserId = row.userId
        this.getListOfficeData();
      },
      // 查询用户管理的事务所列表
      getListOfficeData() {
        const self = this;
        self.manageOfficeQueryParams.userId = self.targetUserId;
        getListOffice(self.manageOfficeQueryParams).then((response) => {
          self.manageOfficeList = response.rows;
          self.manageOfficetotal = response.total
        });
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "用户导入";
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        importTemplate().then((response) => {
          this.download(response.msg);
        });
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },

      // 打开事务所列表
      openOffice() {
        this.manageOfficeVisible = false;
        this.addOfficeVisible = true;
        this.getOfficeList();
      },
      // 事务所列表搜索
      handle0fficeQuery() {
        this.officeQueryParams.page = 1;
        this.getOfficeList();
      },
      // 查询用户未管理的事务所列表
      getOfficeList() {
        const self = this;
        this.loading = true;
        getNotListOffice(self.officeQueryParams).then((response) => {
          this.loading = false;
          this.officetotal = response.total;
          self.officeList = response.rows
        });
      },
      // 为当前组长添加事务所
      addTargetOffice() {
        const self = this;
        this.loading = true;
        if (this.officeIds.toString() == '') return
        let params = {}
        params.officeId = this.officeIds.toString();
        params.userId = this.targetUserId;
        insertUserOffice(params).then((response) => {
          self.loading = false;
          self.manageOfficeVisible = true;
          self.addOfficeVisible = false;
          self.officeQueryParams = {
            pageNum: 1,
            pageSize: 10,
            practiceCertificateNo: undefined,
            firmName: undefined,
          },
            self.getListOfficeData();
          self.msgSuccess("添加成功");
        });
      },
      // 为当前组长删除事务所
      removeTargetOffice() {
        const self = this;
        this.loading = true;
        let params = {}
        params.officeId = this.manageOfficeIds.toString();
        params.userId = this.targetUserId;
        deleteUserOffice(params).then((response) => {
          self.loading = false;
          self.manageOfficeQueryParams = {
            pageNum: 1,
            pageSize: 10,
            practiceCertificateNo: undefined,
            firmName: undefined
          }
          self.getListOfficeData()
        });
      },
      /** 移除按钮操作 */
      confirmRemoveTargetOffice() {
        const self = this;
        if (self.manageOfficeIds.toString() == '') return
        this.$confirm(
          '是否确认删除用户编号为"' + self.manageOfficeIds.toString() + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return self.removeTargetOffice();
          })
          .then(() => {
            this.msgSuccess("删除成功");
          })
          .catch(function () {
          });
      },
      // 获取短信验证码接口
      getTelCode() {
        if (this.form.phonenumber == undefined) {
          this.msgSuccess("请先输入手机号");
        } else {
          getTelCode(this.form.phonenumber).then(res => {
            this.form.uuid = res.msg;
            this.form.isUpdateTel = 1;
          }).catch((err) => {
            console.log(err)
          });
        }
      },
      // 重新发送短信验证
      handleResend(e) {
        this.resendDisable = true;
        this.getTelCode();
        let time = 10;
        let timer = setInterval(function () {
          time--;
          e.target.innerText = "（" + time + "秒）重发";
          if (time === 0) {
            clearInterval(timer);
            e.target.innerText = "重新发送";
          }
        }, 1000);
        if (e.target.innerText === "重新发送") {
          this.resendDisable = false;
        }

      },
      // 发送短信验证
      handleSend() {
        this.resendDisable = true;
        this.getTelCode();
      },
      //显示短信验证
      handUpdateTel() {
        this.showTelCode = true;
      }
    },
  };
</script>
<style lang="scss" scoped>
  .right-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
</style>
